<template>
  <view
    :style="{ height: is_integral ? '720rpx' : '800rpx' }"
    :class="{
      'paypopup-content':
        createOrderUrl != 'createBoxOrder_special' ? true : false,
      'paypopup-contentnew':
        createOrderUrl == 'createBoxOrder_special' ? true : false,
    }"
  >
    <!-- {{ preferential }}{{ balance }} -->
    <!-- {{ is_integral }} -->
    <view class="top-boxinfo">
      <view class="boxinfo-left">
        <image
          style="width: 184rpx; height: 184rpx"
          :src="boxDetailInfo.img"
          mode=""
        ></image>
      </view>
      <view class="boxinfo-right">
        <view class="boxinfo-right-top">
          <view
            class="txtColor"
            style="margin-bottom: 21rpx; font-size: 26rpx; font-weight: 600"
          >
            {{ boxDetailInfo.name }}
          </view>
          <view class="txtColor" style="font-size: 20rpx">
            不支持七天无理由退货·无法回收
          </view>
        </view>
        <view class="boxinfo-right-bottom">
          <text
            class="txtColor"
            style="margin-right: 37rpx; font-size: 24rpx; font-weight: 600"
            >购买数量</text
          >
          <text class="numColor" style="font-size: 24rpx"
            >{{ buyCount }}次</text
          >
        </view>
      </view>
    </view>
    <view class="choose-coupon" v-if="boxDetailInfo.pay_type == 1">
      <text class="txtColor" style="font-size: 24rpx">选择优惠券</text>
      <text
        class="txtColor"
        v-if="!couponname"
        style="font-size: 24rpx"
        @click="chooseCoupon"
        >选择优惠券></text
      >
      <text v-else style="font-size: 24rpx" @click="chooseCoupon">{{
        couponname
      }}</text>
    </view>
    <view class="pays" :style="{ marginTop: is_integral ? '60rpx' : '' }">
      <view class="pays-title"> 支付方式 </view>
      <radio-group @change="radioChange">
        <view class="radio-item" v-if="boxDetailInfo.pay_type == 1">
          <view class="radio-item-left">
            <image
              style="width: 46rpx; height: 37rpx; margin-right: 11rpx"
              src="../static/xinshi.png"
              mode=""
            ></image>
            <text style="font-size: 26rpx">星石代付</text>
          </view>
          <view>
            <text style="margin-right: 18rpx; font-size: 22rpx">{{
              balance
            }}</text>
            <radio style="transform: scale(0.8)" value="3" :checked="true" />
          </view>
        </view>
        <view class="radio-item" v-if="boxDetailInfo.pay_type == 3">
          <view class="radio-item-left">
            <image
              style="
                width: 48rpx;
                height: 48rpx;
                margin-right: 11rpx;
                border-radius: 50%;
              "
              :src="boxDetailInfo.goodsPay.img"
              mode=""
            ></image>
            <text style="font-size: 26rpx">道具支付</text>
          </view>
          <view>
            <text style="margin-right: 18rpx; font-size: 22rpx">{{
              goods_num
            }}</text>
            <radio style="transform: scale(0.8)" value="1" checked="true" />
          </view>
        </view>
        <!-- <view class="radio-item" v-if="!is_integral">
          <view class="radio-item-left">
            <image
              style="
                width: 48rpx;
                height: 48rpx;
                margin-right: 11rpx;
                border-radius: 50%;
              "
              src="../static/weixinpay2.png"
              mode=""
            ></image>
            <text style="font-size: 26rpx">微信支付</text>
          </view>
          <view>
            <radio
              style="transform: scale(0.8)"
              value="1"
              :checked="currentradio == 1"
            />
          </view>
        </view> -->
        <view class="radio-item" v-if="boxDetailInfo.pay_type == 2">
          <view class="radio-item-left">
            <image
              style="width: 46rpx; height: 37rpx; margin-right: 11rpx"
              src="../static/icon.png"
              mode=""
            ></image>
            <text style="font-size: 26rpx">积分支付</text>
          </view>
          <view>
            <text style="margin-right: 18rpx; font-size: 22rpx">{{
              integral
            }}</text>
            <radio style="transform: scale(0.8)" value="3" :checked="true" />
          </view>
        </view>
      </radio-group>
    </view>
    <view class="paybutton" @click="goDrawCards">
      <view class="" v-if="currentradio == 1">
        <span>确认支付(</span>
        <span style="text-decoration: line-through">{{ realmoney }}</span>
        <span>)优惠{{ preferential }}</span>
      </view>
      <view class="" v-else>
        {{ `确认支付${realmoney}` }}
      </view>
    </view>
    <view class="pays-agree">
      <radio
        @click="changeAgree"
        style="transform: scale(0.8)"
        value="r1"
        :checked="agree"
      />本人已满18岁，已阅读并同意<text @click="goRule(2)">《用户协议》</text
      >和<text @click="goRule(8)">《预售条款》</text>
    </view>
    <view class="abandon"> 未成年人禁止购买 </view>
  </view>
</template>

<script>
  import { readonly } from 'vue'
  import { http } from '@/utils/http.js'

  export default {
    name: 'payBox',
    props: {
      is_integral: {
        type: Boolean,
        default: false,
      },
      couponname: {
        type: String,
      },
      case_id: {
        type: String,
      },
      // createBoxOrder_special
      createOrderUrl: {
        type: String,
      },
      boxDetailInfo: {
        type: Object,
      },
      blindboxId: {
        type: String,
      },
      couponId: {
        type: String,
      },
      buyCount: {
        type: Number,
      },
      paymoney: {
        type: Number,
      },
      realmoney: {
        type: Number,
      },
    },
    watch: {
      blindboxId: {
        handler(val, old) {},
      },
    },
    created() {
      this.userInfo()
    },
    data() {
      return {
        currentradio: this.is_integral ? 2 : 3, // 3星石，2积分，1微信
        agree: true,
        balance: 0,
        preferential: 0,
        integral: 0,
        goods_num: 0,
      }
    },
    methods: {
      radioChange(evt) {
        console.log(evt.detail.value)
        this.currentradio = evt.detail.value
      },
      async chooseCoupon() {
        await this.$emit('chooseCoupon')
      },
      async userInfo() {
        const res = await http.request({
          url: '/api/user/userMsg',
          method: 'POST',
          data: {
            goods_id: this.boxDetailInfo.goodsPay?.id,
          },
        })
        // console.log('user')
        // console.log(res.data, 'res.data.data.balanceres.data.data.balance')
        this.balance = res.data.data.balance
        this.preferential = res.data.data.preferential
        this.integral = res.data.data.integral || 0
        this.goods_num = res.data.goods_num || 0
      },
      async goDrawCards() {
        if (!this.agree) {
          uni.utils.toast('请先同意用户协议')
          return
        }
        // 支付方式 1微信 2支付 3余额 4积分 5道具支付
        ////////////////////  1     2   3
        if (this.boxDetailInfo.pay_type == 1) {
          if (Number(this.balance) < Number(this.realmoney)) {
            uni.utils.toast('星石不足')
            return
          }
          this.paywxDrawMoney()
          // paypopup.value.close()
        } else if (this.boxDetailInfo.pay_type == 2) {
          if (Number(this.integral) < Number(this.realmoney)) {
            uni.utils.toast('积分不足')
            return
          }
          this.paywxDrawMoney()
          // paypopup.value.close()
        } else if (this.boxDetailInfo.pay_type == 3) {
          if (Number(this.integral) < Number(this.realmoney)) {
            uni.utils.toast('道具不足')
            return
          }
          this.paywxDrawMoney()
          // paypopup.value.close()
        }
        // else if (this.currentradio == 1) {
        //   // payTXDraw()
        //   uni.utils.toast('拉起支付失败，请联系客服~')
        // }
      },
      changeAgree() {
        this.agree = !this.agree
      },
      // 星石支付
      async paywxDrawMoney() {
        const res = await http.request({
          url: `/api/boxorder/${this.createOrderUrl}`,
          method: 'POST',
          data: {
            id: this.blindboxId,
            sorce: 1,
            num: Number(this.buyCount),
            pay_type: +this.boxDetailInfo.pay_type + 2,
            coupon_id: this.couponId,
            case_id: this.case_id || undefined,
            money: this.paymoney,
          },
          // 支付方式 1微信 2支付 3,1余额 4,2积分 5,3道具支付
        })
        // console.log(res)
        // 支付结束回上级页面处理事件
        this.$emit('payReturnFun', res)
      },
    },
  }
</script>

<style lang="scss">
  .abandon {
    width: 100%;
    margin-top: 10rpx;
    text-align: center;
    font-size: 22rpx;
    color: red;
    font-weight: 500;
  }
  .paypopup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    // height: 760rpx;
    padding: 30rpx 30rpx 0 30rpx;
    box-sizing: border-box;
    // background-color: rgba(26, 19, 63, 0.9);
    background-image: linear-gradient(180deg, #fbf7e7, #fff6a8, #fbf7e4);
    color: #3d3d3d;
    .numColor {
      color: #ff4300;
    }
    .top-boxinfo {
      width: 100%;
      display: flex;
      align-items: center;
      flex-shrink: 0;

      .boxinfo-left {
        width: 184rpx;
        height: 184rpx;
        border-radius: 6rpx;
        overflow: hidden;
        margin-right: 12rpx;
      }

      .boxinfo-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 180rpx;
      }
    }

    .choose-coupon {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 47rpx;
      flex-shrink: 0;
    }

    .pays {
      width: 100%;

      .pays-title {
        margin: 24rpx 0 13rpx 0;
        font-size: 24rpx;
      }

      .radio-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13rpx 0;

        border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);

        &:last-child {
          border: none;
        }

        .radio-item-left {
          display: flex;
          align-items: center;
        }
      }
    }

    .paybutton {
      width: 100%;
      height: 109rpx;
      margin-top: 32rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/paybutton3.png')
        no-repeat;
      background-size: contain;
      font-weight: 800;
      font-size: 38rpx;
      color: #1f1f1f;
      line-height: 96rpx;
      text-align: center;
      // text-stroke: 1rpx #FFFFFF;
      // -webkit-text-stroke: 1rpx #FFFFFF;
    }

    .pays-agree {
      width: 100%;
      margin-top: 29rpx;
      font-size: 20rpx;
      color: #3d3d3d;
      text-align: center;
    }
  }
  // 1111111其他样式
  .paypopup-contentnew {
    display: flex;
    flex-direction: column;
    align-items: center;
    // height: 771rpx;
    padding: 63rpx 30rpx 0 30rpx;
    box-sizing: border-box;
    background-color: rgba(26, 19, 63, 0.9);
    color: #e1e1e1;
    .numColor {
      color: #9e77f6;
    }
    .top-boxinfo {
      width: 100%;
      display: flex;
      align-items: center;
      flex-shrink: 0;

      .boxinfo-left {
        width: 184rpx;
        height: 184rpx;
        border-radius: 6rpx;
        overflow: hidden;
        margin-right: 12rpx;
      }

      .boxinfo-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 180rpx;
      }
    }

    .choose-coupon {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 47rpx;
      flex-shrink: 0;
    }

    .pays {
      width: 100%;

      .pays-title {
        margin: 24rpx 0 13rpx 0;
        font-size: 24rpx;
      }

      .radio-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13rpx 0;

        border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);

        &:last-child {
          border: none;
        }

        .radio-item-left {
          display: flex;
          align-items: center;
        }
      }
    }

    .paybutton {
      width: 100%;
      height: 109rpx;
      margin-top: 32rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/paybutton.png')
        no-repeat;
      background-size: contain;
      font-weight: 800;
      font-size: 38rpx;
      color: #9146a0;
      line-height: 96rpx;
      text-align: center;
      // text-stroke: 1rpx #FFFFFF;
      // -webkit-text-stroke: 1rpx #FFFFFF;
    }

    .pays-agree {
      width: 100%;
      margin-top: 29rpx;
      font-size: 20rpx;
      color: #e1e1e1;
      text-align: center;
    }
  }
</style>
